<!DOCTYPE html>
<html>
<title><{$title}></title>
<head>
  <meta charset="UTF-8">
  <style>
  .el-col {
    margin-top: 20px;
  }
  .el-button{width: 200px;}
  </style>
  <!-- import CSS -->
  <{webcontrol type='LoadJsCss' src="Resource/Script/layui/layui/css/layui.css"}>
  <{webcontrol type='LoadJsCss' src="Resource/Script/layui/style/admin.css"}>
  <{webcontrol type='LoadJsCss' src="Resource/Script/vue/element/index.css"}>
  <{webcontrol type='LoadJsCss' src="Resource/Script/vue/vue.js"}>
  <{webcontrol type='LoadJsCss' src="Resource/Script/vue/element/index.js"}>

</head>
<body>
  <div id="div1">
    <el-container>
      <el-main>
        <el-row>
          <div class="layui-col-md8  layui-col-xs12 card-pull-center">
            <div class="layui-card">
              <div class="layui-card-header">选择接口</div>
              <div class="layui-card-body layui-card-body-formEle" style="max-height: 583px; overflow: auto; min-height: 150px;">
                <el-collapse v-model="activeName" accordion>
                  <el-collapse-item v-for="(item,index) in Apis" :title="item.API_TITLE" :name="index">
                    <el-row>
                      <el-col :span="6" v-for="(api,key) in item.api_array" >
                        <el-button v-if="api.params" @click="handelApitest(index,key)" type="primary" plain>{{api.title}}</el-button>
                        <el-button v-else @click="handelApitest(index,key)" title="没有配置params" disabled>{{api.title}}</el-button>
                      </el-col>
                    </el-row>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </div>
        </el-row>
      </el-main>
    </el-container>
    <!-- dialog -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogTableVisible" :fullscreen="false" width="90%" top="20px">
      <div :style="'width:100%;height:'+dialogHeight+'px;'">
        <iframe width='100%' height='100%' :src="pageUrl" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</body>


<script>
  var app = new Vue({
    el: '#div1',
    data: function() {
      return {
        'activeName': '0',
        'dialogTitle': '测试接口',
        'pageUrl': '',
        'dialogTableVisible': false,
        'Apis': <{$Apis|@json_encode}>,
        'dialogHeight': '600'
      }
    },
    methods :{
      handelApitest :function(index ,apiKey){
        console.log('index => ',index);
        console.log('apiKey => ',apiKey);
        this.dialogTableVisible = true;
        this.dialogTitle = this.Apis[index].API_TITLE+' >> '+this.Apis[index].api_array[apiKey].title;
        this.pageUrl = window.location.href + `?formPage=${index},${apiKey}`;
        // window.open(apiUrl);
        // window.location.href = this.baseUrl + '&kindId='+kind;
      }
    },
    mounted:function(){
      var bodyHeight = document.documentElement.clientHeight || document.body.clientHeight;
      this.dialogHeight = bodyHeight - 185;
    }
  });
</script>
</html>